<template>
  <div style="margin-right: 100px; margin-left: 100px;" class="cc_box">
    <!--  循环得到一级菜单，二级菜单  -->
    <el-tabs v-model="grandActiveName" @tab-click="grandHandleClick(grandActiveName)">
      <el-tab-pane label="全选" name=""></el-tab-pane>
      <el-tab-pane v-for="item in grandInfo" :label="item.ctName" :name="''+item.ctId" :key="item.ctId">
        <el-tabs v-model="parentActiveName" v-if="parentInfo1.length>0" @tab-click="parentHandleClick(parentActiveName)">
          <el-tab-pane label="全选" name="0"></el-tab-pane>
          <el-tab-pane v-for="elem in item.courseTypes" :label="elem.ctName" :name="''+elem.ctId" :key="elem.ctId">
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <template>
      <el-tabs v-model="otherActiveName" @tab-click="otherHandleClick(otherActiveName)">
        <el-tab-pane label="全选" name=""></el-tab-pane>
        <el-tab-pane v-for="elem in otherInfo" :label="elem.name" :name="''+elem.id" :key="elem.id"></el-tab-pane>
      </el-tabs>
    </template>
    <el-tabs v-model="courseS" @tab-click="courseSend(courseS)">
      <el-row :gutter="20">
        <span v-for="items in ClassInfo">
          <el-col :span="5" v-for="item in items" :key="item.id">
              <el-card :body-style="{ padding: '0px' }" shadow="hover">
                <el-link :underline="false" @click="handleClass(item.kid)" >
                    <img :src="item.courseImage"
                         class="image">
                <div class="bottom clearfix">
                    <p>{{item.courseName}}</p>
                    <span class="price_box">
                      <span v-if="item.coursePrice!=0">非会员免费
                      </span>
                      <span v-if="item.coursePrice==0">
                        ￥{{item.coursePrice}}
                      </span>
                      <span style="font-size: 15px; color: red">SVIP:￥{{item.courseVprice}}
                      </span>
                    </span>
                </div>
                </el-link>
              </el-card>
        </el-col>
        </span>

      </el-row>
    </el-tabs>

  </div>
</template>

<script>
import  qs from "qs";
export default {
  name: "CourseCentreBody",
  data() {
    return {
      courseS:'0',
      otherActiveName: '0',
      grandActiveName: {
        ctId: '',
        menu: '',
      },
      parentActiveName: '0',
      grandInfo: [],
      parentInfo: [],
      otherInfo: [
        {
          id: 1, name: '付费'
        },
        {
          id: 2, name: '免费'
        },
        {
          id: 3, name: 'SVIP免费'
        }
      ],
      parentInfo1: [
        {
          id: 1, name: '系统架构'
        },
        {
          id: 2, name: '项目实战'
        },
        {
          id: 3, name: '单点突破'
        },
        {
          id: 4, name: '基础'
        },
        {
          id: 5, name: '后台管理系统'
        }
      ],
      parentInfo2: [],
      ClassInfo: [],
      goodClassInfo: [],
      goodClassInfo1: [],
      currentPage: 1,
      total: 100,
      sendBackground:{
        price:'0',
        ctId:'0',
      },
    };
  },
  created() {
    this.sendBackground.ctId=this.$route.query.ctId
    alert(JSON.stringify(this.sendBackground)+"SSS")
    if (this.sendBackground.ctId == undefined) {
      this.sendBackground.ctId=0
    } else {
      this.sendBackground.ctId=this.$route.query.ctId
    }

    this.demandList();
    this.findAll();
  },
  methods:{


    demandList(){
      this.$axios.post("leadingEnd-curriculum/ronco/course-type/demandAll").then(r => {
        this.grandInfo=r.data;
      })
    },
    findAll(){
      alert(JSON.stringify(this.sendBackground))
      this.$axios.post("leadingEnd-curriculum/ronco/course/findAll",qs.stringify(this.sendBackground)).then(r => {
        alert(JSON.stringify(r.data))
        this.ClassInfo=r.data;

      })
    },
    courseSend(tab,event){
      alert(JSON.stringify(tab))
    },
    grandHandleClick(tab, event) {

      this.sendBackground.ctId=tab
      alert(JSON.stringify(this.sendBackground.ctId))
      this.findAll();
    },
    parentHandleClick(tab, event) {
      if (tab==0){
        this.sendBackground.ctId=this.grandActiveName[0]
        alert(JSON.stringify(this.sendBackground.ctId))
      } else {
        this.sendBackground.ctId=tab;
      }
      this.findAll();
    },
    otherHandleClick(tab, event) {
      alert(JSON.stringify(tab))
      this.sendBackground.price=tab;
      this.findAll();
    },
    handleClass(value){
      this.$router.push({
        path:'/cDetail/'+value
      });
      // alert(value);
    }
  }
}
</script>

<style>
.cc_box .el-tabs__active-bar {
  height: 0;
  background: transparent !important;
}

/*.cc_box .el-tabs__nav-wrap::after {*/
/*height: 0;*/
/*position: static !important;*/
/*}*/

.cc_box .bottom {
  margin-top: 13px;
  line-height: 12px;
  height: 80px;
}

.cc_box .button {
  padding: 0;
  float: right;
}

.cc_box .image {
  width: 100%;
  height: 150px;
  display: block;
}
.cc_box .block{
  height: 80px;
  margin-top: 10px;
}
.cc_box .block .el-pagination{
  font-size: 16px;
  height: 60px;
}
</style>

